<template>
	<view class="page-container">
		
		<block v-if="show==1">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">申请代理</text>
			<text class="subtitle">请填写真实信息，我们将在1-3个工作日内与您联系</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 姓名输入 -->
			<view class="form-item">
				<text class="label">姓名<text class="required">*</text></text>
				<input class="input" type="text" placeholder="请输入您的真实姓名" @input="getmyname"
					placeholder-class="placeholder" />
			</view>

			<!-- 手机号码输入 -->
			<view class="form-item">
				<text class="label">手机号码<text class="required">*</text></text>
				<input class="input" type="number" maxlength="11" placeholder="请输入11位手机号码" v-model="formData.phone"
					placeholder-class="placeholder" @input="formatPhoneNumber" />
				<text class="error-tip" v-if="phoneError">{{phoneError}}</text>
			</view>

			<!-- 所在地选择 -->
			<view class="form-item">
				<text class="label">所在地<text class="required">*</text></text>
				<picker mode="region" @change="handleRegionChange" class="picker">
					<view class="picker-view">
						<text class="picker-text placeholder" >
							{{adda ? adda +' '+ addb +' '+ addc : '请选择省市区'}}
						</text>
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 详细地址 -->
			<view class="form-item">
				<text class="label">详细地址<text class="required">*</text></text>
				<input class="input" type="text" placeholder="请输入街道门牌号等详细信息" @input="getaddress"
					placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn-container">
			<button class="submit-btn" @click="handleSubmit">
				提交申请
			</button>

		</view>

	</block>

	<block v-if="show==2">
		
		<view style="height: 100px;"></view>
		<!-- 状态展示区 -->
		<view class="status-card statusClass">
			<image class="status-image" src="/static/sh.png" mode="aspectFit" />
			<text class="status-title">审核中</text>
			<text class="status-desc">您的申请正在审核中</text>
			<text class="status-time"> 申请时间 {{info.createtime}} </text>
		</view>
	</block>
	
	<block v-if="show==3">
	<!-- 代理信息区 -->
	<view class="info-section">
		<text class="section-title">代理信息</text>
		<view class="info-list">
	
			<view class="info-item">
				<text class="info-label">姓名</text>
				<text class="info-value">{{info.name}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">联系方式</text>
				<text class="info-value">{{info.phone}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">代理区域</text>
				<text class="info-value"> {{info.add_a}} {{info.add_b}} {{info.add_c}}{{info.address}}</text>
			</view>
		</view>
	</view>
	
	<view class="benefit-section">
	  <text class="section-title">代理权益</text>
	  <view class="benefit-list">
		<view class="benefit-card" >
			<image src="/static/fy.png" class="crdimg" mode=""></image>
			<text class="benefit-title">全站分佣</text>
			<text class="benefit-desc">全站分佣全站分佣全站分佣</text>
		</view>
		
		<view class="benefit-card" >
			<image src="/static/tg.png" class="crdimg" mode=""></image>
			<text class="benefit-title">全站分佣</text>
			<text class="benefit-desc">全站分佣全站分佣全站分佣</text>
		</view>
		
	  </view>
	</view>
</block>


</view>



</template>
<script>
	
	import { mapState } from 'vuex';
		
	export default {
		data() {
			return {
				show:1,
				statusImage:'',
				adda:'',
				addb:'',
				addc:'',
				phone:'',
				name:'',
				address:'',
				info:[]
			}
		},
		
		onShow() {
			this.getmydailiinfo();
		},
		methods: {
			
			async getmydailiinfo() {
			
				var that = this;
				let info = await this.$api.request('/downs/getmydaili', 'POST',{});
			
					if(!info){
						return false;
					}
					
					if	(info.status==0){
						that.show=2;
						that.info=info;
					}else if(info.status==1){
						that.show=3;
						that.info=info;
					}
				console.log('=========', info)
			
			
			},
			
			// 提交信息
			async handleSubmit() {
			
				var that = this;
				let info = await this.$api.request('/downs/handleSubmit', 'POST',{
					adda:this.adda,
					addb:this.addb,
					addc:this.addc,
					phone:this.phone,
					name:this.name,
					address:this.address,
				});
			
				console.log('=========', info)
			
				uni.showToast({
					title:info.msg,
					icon:'none'
				})
				
				that.getmydailiinfo();
			
			},
			
			getaddress(ret){
				this.address=ret.detail.value;
			},
			getmyname(ret){
				this.name=ret.detail.value;
			},
			formatPhoneNumber(ret){
				this.phone=ret.detail.value;
			},
			handleRegionChange(ret){
				console.log(ret);
				
				var address=ret.detail.value;
				
				this.adda=address[0];
				this.addb=address[1];
				this.addc=address[2];
				
				
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f7f7f7;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.header {
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.form-container {
		flex: 1;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.required {
		color: #f56c6c;
		margin-left: 6rpx;
	}

	.input {
		height: 80rpx;
		font-size: 28rpx;
		color: #333;
		width: 100%;
		padding: 0;
	}

	.placeholder {
		color: #ccc;
	}

	.picker {
		width: 100%;
	}

	.picker-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.error-tip {
		font-size: 24rpx;
		color: #f56c6c;
		margin-top: 10rpx;
		display: block;
	}

	.submit-btn-container {
		margin-top: 40rpx;
		padding: 0 30rpx;
	}

	.submit-btn {
		background-color: #2979ff;
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.submit-btn[disabled] {
		background-color: #a0c0ff;
		color: #fff;
	}



	page {
		height: 100%;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f7f7f7;
		padding-bottom: 120rpx;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		flex-shrink: 0;
	}

	.nav-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	/* 状态卡片样式 */
	.status-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx;
		margin: 30rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.status-not-apply {
		border-top: 8rpx solid #999;
	}

	.status-reviewing {
		border-top: 8rpx solid #FFC107;
	}

	.status-approved {
		border-top: 8rpx solid #4CAF50;
	}

	.status-image {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}

	.status-title {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 10rpx;
		color: #333;
	}

	.status-desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 10rpx;
	}

	.status-time {
		font-size: 12px;
		color: #999;
	}

	/* 信息区域样式 */
	.section-title {
		display: block;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #4A90E2;
	}

	.info-section {
		background-color: #fff;
		padding: 30rpx;
		margin: 0 30rpx 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.info-list {
		display: flex;
		flex-direction: column;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 14px;
		color: #666;
	}

	.info-value {
		font-size: 14px;
		font-weight: 500;
		color: #333;
	}

	/* 权益区域样式 */
	.benefit-section {
		background-color: #fff;
		padding: 30rpx;
		margin: 0 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.benefit-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.benefit-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
	}

	.benefit-title {
		font-size: 14px;
		font-weight: 500;
		margin: 10rpx 0;
		color: #333;
	}

	.benefit-desc {
		font-size: 12px;
		color: #666;
		text-align: center;
	}

	/* 操作按钮区域 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		z-index: 10;
	}

	.action-bar uni-button {
		width: 100%;
	}
	
	.crdimg{
		display: block;
		width: 70rpx;
		height: 70rpx;
	}
</style>